import { defineComponent, ref, watch } from "vue";

import { getServiceCount } from '@/api/statistics'
import './style.scss'

export default defineComponent({
  name: 'BigscreenServiceInfo',
  props: {
    time: {
      type: Object,
      default: () => { }
    },
    code: { // 地区code
      type: String,
      default: ''
    },
    refresh: {
      type: Number,
    }
  },
  setup(props) {
    const infoData = ref({})
    const getData = async () => {
      const {endDate,startDate} = props.time
      const para = {
        areaCode: props.code,
        endDate,
        startDate
      }
      const res = await getServiceCount(para);
      if (res.status === 200) {
        infoData.value = res.data
      }
    };
    watch(() => props.refresh, ()=> {
      getData()
    })
    watch(() => props.code, () => {
			getData()
		});
    return () =>
      <div class="panel info">
        <header class="service"/>
        <main class="flow">
        <dl>
          <dt></dt>
          <dd>
            <div>上线服务总数</div>
            <h4>{infoData.value.serviceNum ??= 0 }</h4>
          </dd>
        </dl>
        <dl>
          <dt></dt>
          <dd>
            <div>新增上线服务</div>
            <h4>{infoData.value.serviceIncreaseNum ??= 0 }</h4>
          </dd>
        </dl>
        <dl>
          <dt></dt>
          <dd>
            <div>累计调用次数</div>
            <h4>{infoData.value.serviceInvokeNum ??= 0 }</h4>
          </dd>
        </dl>
        <dl>
          <dt></dt>
          <dd>
            <div>平均调用时长</div>
            <h4>{infoData.value.serviceAverageTime ??= 0 }</h4>
          </dd>
        </dl>
        <dl>
          <dt></dt>
          <dd>
            <div>服务调用成功</div>
            <h4>{infoData.value.serviceInvokeSuccess ??= 0 }</h4>
          </dd>
        </dl>
        <dl>
          <dt></dt>
          <dd>
            <div>服务调用失败</div>
            <h4>{infoData.value.serviceInvokeFailed ??= 0 }</h4>
          </dd>
        </dl>
        </main>
      </div>
  }
})